<template>
  <div>
    <div class="main">
      <div class="sczl">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div class="content-title">在线填表</div>
          <div style="display: flex;align-items: center;cursor: pointer;">
            <img class="zcImg" src="../../../assets/zc.png" width="16" alt="">
            <div class="zcText">暂存</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="form-title">
          <span class="form-title-tit" style="font-weight: 700;">提醒：</span>
          <span>1.带<span style="color: rgb(237, 64, 20);">*</span>号为必填，请根据实际情况进行填写。</span>
        </div>
        <p class="stuff">
          <img class="" src="../../../assets/xx.png" width="22" alt="">
          <span>基本信息</span>
        </p>
        <el-divider></el-divider>

        <!-- <div class="name">基本信息(必填)</div> -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="义务人类型" prop="name">
            <el-select v-model="ruleForm.value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="义务人名称" prop="name">
            <el-input  v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="name">
            <el-input  v-model="ruleForm.zjlx"></el-input>
          </el-form-item>
          <el-form-item label="证件号码" prop="name">
            <el-input  v-model="ruleForm.zjhm"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="name">
            <el-input  v-model="ruleForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="申请验收面积" prop="name">
            <el-input  v-model="ruleForm.sqysmj"></el-input>
          </el-form-item>
          <el-form-item label="申请复垦项目" prop="name">
            <el-select v-model="ruleForm.xmvalue" clearable placeholder="请选择">
              <el-option v-for="item in xmOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目详情" v-if="ruleForm.xmvalue">
            <el-descriptions>
              <el-descriptions-item label="项目名称" :span="24">{{ ruleForm.xmvalue }}观景口水利枢纽工程输水线路十八</el-descriptions-item>
              <el-descriptions-item label="用地位置" :span="24">{{ ruleForm.xmvalue }}鱼洞江州路17号4层</el-descriptions-item>
              <el-descriptions-item label="批准文号">渝府地[2024]1号</el-descriptions-item>
              <el-descriptions-item label="区县名称">兴隆</el-descriptions-item>
              <el-descriptions-item label="批复总面积">11321㎡</el-descriptions-item>
              <el-descriptions-item label="批准日期" >2021-10-10</el-descriptions-item>
              <el-descriptions-item label="到期时间" >2024-12-23</el-descriptions-item>
            </el-descriptions>
          </el-form-item>
        </el-form>
        <el-footer style="text-align: center;margin-top: 10px;">
          <el-button type="info" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goNext">下一步</el-button>
        </el-footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      rules: {},
      xmOptions: [
        {
          label: '酉阳临时用地项目',
          value: '酉阳临时用地项目'
        },
        {
          label: '彭水临时用地项目',
          value: '彭水临时用地项目'
        },
      ],
      options: [
        {
          label: '自然人',
          value: '自然人'
        },
        {
          label: '法人',
          value: '法人'
        },
      ],
    }
  },
  methods: {
    goNext() {
      this.$emit('goStep')
    },
    goBack() {
      this.$emit('goBack')
    },
  }
}
</script>

<style scoped lang="less">
.demo-ruleForm {
  padding: 20px 15px;
}

.stuff {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #2789ee;
  padding-bottom: 5px;
}

.zcImg {
  margin-right: 5px;
}

.zcText {
  font-size: 16px;
  color: #2789ee;
}

.form-title {
  margin: 17px 0;
  width: 100%;
  height: 54px;
  background: #f6f6f6;
  border: 1px solid #f6f6f6;
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.content-title {
  font-size: 24px;
  color: #222;
  font-weight: 700;
}

.el-input {
  width: 80%;
  /* 调整为所需的宽度 */
}

/deep/.el-descriptions__body {
  padding: 10px 20px;
}

.el-select {
  width: 80%;
  /* 调整为所需的宽度 */
}

.fjsc /deep/.el-form-item {
  width: 50%;
}

.el-form-item {
  margin-bottom: 20px;
}

.container {}

.el-divider--horizontal {
  margin: 10px 0;
}

.name {
  font-weight: 500;
  font-size: 22px;
  color: #000000;
  line-height: 30px;
  margin-bottom: 10px;
}

.main {
  /* width: 100%; */
  height: 100%;
  /* padding: 0 150px; */
  /* background-color: pink; */
}

.footer {
  height: 80px;
  line-height: 80px;
  /* background-color: pink; */
  text-align: center;
  border-radius: 10px;
}

/deep/ .el-button--primary{
  background-color: #0c7cff !important;
}
</style>